<template>
  <div class="container">
    <scroll-view style="height: 100%;" scroll-y="true"
                 refresher-background="#f9f9f9"
                 show-scrollbar="true"
                 refresher-enabled="true"
                 refresher-default-style="black"
                 @scrolltolower="lower"
                 @scroll="sc"
                 :refresher-triggered="triggere"
                 @refresherrefresh="onRefresh"
    >

      <up-grid class="up-grid" :border="false" :col="2">
        <up-grid-item
            v-for="(baseListItem, baseListIndex) in baseList"
            :key="baseListIndex"
            class="grid-item"
            style="width: calc(50% - 4px); "
        >
          <up-image
              :show-loading="true"
              :src="baseListItem.name"
              class="item-image"
          ></up-image>
          <div class="grid-info">
            <div class="grid-title"><up-text class="grid-remark-text" :lines="2" size="10" text="我用十年青春,赴你最后之约"></up-text></div>
            <div class="grid-remark">
              <view>
                <up-image :src="isss" shape="circle" width="15px" height="15px"></up-image>
              </view>
              <up-text class="grid-remark-text" :lines="2" size="6" text="我用十年青春,赴你最后之约"></up-text>
              <div class="grid-remark-count">
                <up-icon name="heart" size="15" @click="addLikeCount(baseListItem)"/>
                <up-text size="6" :text="baseListItem.like"/>
              </div>
            </div>
          </div>

        </up-grid-item>
      </up-grid>
      <up-toast ref="uToastRef"/>
    </scroll-view>

  </div>
</template>

<script setup>
import {ref} from 'vue';
const triggere = ref(false)
const isss = ref("https://cdn.uviewui.com/uview/album/1.jpg")

const baseList = ref([
  {title: '美食', name: 'https://cdn.uviewui.com/uview/album/1.jpg',like:1},
  {title: '旅行', name: 'https://cdn.uviewui.com/uview/album/2.jpg',like:1},
  {title: '时尚', name: 'https://cdn.uviewui.com/uview/album/3.jpg',like:1},
  {title: '健身', name: 'https://cdn.uviewui.com/uview/album/4.jpg',like:1},
  {title: '读书', name: 'https://cdn.uviewui.com/uview/album/5.jpg',like:1},
]);

const addLikeCount=(item)=>{
  item.like+=1000
}

const onRefresh=()=>{
  triggere.value=true
  setTimeout(()=>{
    triggere.value=false
  },1000)

}
const lower= ()=>{
  console.log('www')
}
const sc= ()=>{
  console.log('www')
}

</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #f9f9f9;
}

.up-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid-item {
  margin-bottom: 8px;
  margin-right: 3px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.item-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.grid-info {
  width: 100%;
  /* Use flexbox to align children horizontally */
  align-items: center; /* Align children vertically in the middle */
  text-align: left; /* Ensure text aligns to the left */
  padding: 5px; /* Add padding around the info */
}

.grid-title {
  flex-grow: 1; /* Allows the title to fill the space */
  padding-left: 5px;
}

.grid-remark {
  padding-left: 5px;
  display: flex; /* Continue using flexbox for internal alignment */
  align-items: center; /* Center items vertically */
  margin-left: 5px; /* Space between title and any remark content */
}
.grid-remark .grid-remark-text {
  padding-left: 5px;
}

.grid-remark .grid-remark-count {
  display: flex;
  margin-right: 5px;
  margin-top: 5px;
}
</style>